<template>
  <div class="appContainer">
    <div class="headerBox">
      <el-button type="text" icon="el-icon-plus" @click="newLinkHandle">新建连接</el-button>
      <h1>数据库管理平台</h1>
      <i class="el-icon-full-screen" title="全屏"></i>
    </div>
    <div class="containerMain">
      <div class="contentMain">
        <div class="contentBox">
          <Tabs/>
          <div class="contentPage">
            <transition name="fade-transform" mode="out-in">
              <router-view class="mainView" />
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tabs from '@/components/common/Tabs';
import {mapGetters} from "vuex";
export default {
  name: 'index',
  components: {
    Tabs,
  },
  data(){
    return {
      newIcon: './static/img/newIcon.png',
      keyword: '',
      isTable: false,
      iconObj: {
        mysql: './static/img/mysql.png',
        oracle: './static/img/oracle.png',
        dm: './static/img/dm.png',
        rdjc: './static/img/rdjc.png',
        mongoDB: './static/img/mongoDB.png'
      },
      databaseIcon: './static/img/database.png',
      databaseData: [{
        id: 1,
        icon: 'mysql',
        label: '192.168.1.139',
        type: 'mysql',
        status: 1,
        children: [{
          label: 'TechStream',
        }, {
          label: 'FutureDB'
        }, {
          label: 'QuantumStore'
        }, {
          label: 'NeuralBase'
        }, {
          label: 'HyperCore'
        }]
      }, {
        id: 2,
        icon: 'oracle',
        label: '192.168.1.139',
        type: 'oracle',
        children: [{
          label: 'EduArchive',
        }, {
          label: 'LearnDB',
        }, {
          label: 'AcademiaCore'
        }, {
          label: 'KnowledgeTree'
        }, {
          label: 'StudySphere'
        }]
      }, {
        id: 3,
        icon: 'dm',
        label: '192.168.1.139',
        type: '达梦',
        children: [{
          label: 'BizFlowDB',
        }, {
          label: 'TradeHub',
        }, {
          label: 'CommerceGrid'
        }, {
          label: 'EnterpriseCore'
        }, {
          label: 'MarketPulse'
        }]
      }, {
        id: 4,
        icon: 'rdjc',
        label: '192.168.1.139',
        type: '人大进仓',
        children: [{
          label: 'DataVault',
        }, {
          label: 'InfoSphere',
        }, {
          label: 'DataCore'
        }, {
          label: 'PrimeDB'
        }, {
          label: 'MasterRecords'
        }]
      }],
      tableIcon: './static/img/tableIcon.png',
      fieldsIcon: './static/img/fieldsIcon.png',
      tableData: [{
        label: 'sys_user',
        comment: '用户信息表',
        info: '2 row',
        children: [{
          type: 'bigint',
          comment: '用户ID',
          label: 'user_id',
        }, {
          type: 'varchar',
          comment: '用户名',
          label: 'user_name',
        }, {
          type: 'varchar',
          comment: '用户昵称',
          label: 'nick_name',
        }, {
          type: 'varchar',
          comment: '用户类型（00系统用户）',
          label: 'user_type',
        }, {
          type: 'varchar',
          comment: '用户邮箱',
          label: 'email',
        },
          {
            type: 'varchar',
            comment: '手机号码',
            label: 'phonenumber',
          }, {
            type: 'varchar',
            comment: '用户性别（0男 1女 2未知）',
            label: 'sex',
          }, {
            type: 'varchar',
            comment: '帐号状态（0正常 1停用）',
            label: 'status',
          }, {
            type: 'varchar',
            comment: '最后登录IP',
           label: 'login_ip',
          }
        ]
      }, {
        label: 'sys_role_menu',
        comment: '角色和菜单关联表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '菜单ID',
          label: 'menu_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '菜单ID',
          label: 'menu_id',
        }]
      }, {
        label: 'sys_user_role',
        comment: '用户和角色关联表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '用户ID',
          label: 'user_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '用户ID',
          label: 'user_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }]
      }, {
        label: 'sys_role_dept',
        comment: '角色和部门关联表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '部门ID',
          label: 'dept_id',
        }, {
          type: 'varchar',
          comment: '角色ID',
          label: 'role_id',
        }, {
          type: 'varchar',
          comment: '部门ID',
          label: 'dept_id',
        }]
      },{
        label: 'sys_dict_type',
        comment: '字典类型表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '字典主键',
          label: 'dict_id',
        }, {
          type: 'varchar',
          comment: '字典名称',
          label: 'dict_name',
        }, {
          type: 'varchar',
          comment: '字典类型',
          label: 'dict_type',
        }, {
          type: 'varchar',
          comment: '状态（0正常 1停用）',
        }
        ]
      }, {
        label: 'sys_dict_data',
        comment: '字典数据表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '字典主键',
          label: 'dict_id',
        }, {
          type: 'varchar',
          comment: '字典名称',
          label: 'dict_name',
        }, {
          type: 'varchar',
          comment: '字典类型',
          label: 'dict_type',
        }, {
          type: 'varchar',
          comment: '状态（0正常 1停用）',
        }
        ]
      }, {
        label: 'sys_config',
        comment: '参数配置表',
        info: '6 row',
        children: [{
          type: 'varchar',
          comment: '参数主键',
          label: 'config_id',
        }, {
          type: 'varchar',
          comment: '参数名称',
          label: 'config_name',
        }, {
          type: 'varchar',
          comment: '参数键名',
          label: 'config_key',
        }, {
          type: 'varchar',
          comment: '参数键值',
          label: 'config_value',
        }]
      },
      {
       label: 'sys_dept',
       comment: '部门表',
       info: '6 row',
        children: [{
          type: 'varchar',
          comment: '部门ID',
          label: 'dept_id',
        }, {
          type: 'varchar',
          comment: '部门名称',
          label: 'dept_name',
        }, {
          type: 'varchar',
          comment: '显示顺序',
          label: 'order_num',
        }, {
          type: 'varchar',
          comment: '父部门ID',
          label:'parent_id',
        }]
      },{
        label: 'sys_post',
          comment: '岗位信息表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '岗位ID',
            label: 'post_id',
          }, {
            type: 'varchar',
            comment: '岗位编码',
            label: 'post_code',
          }, {
            type: 'varchar',
            comment: '岗位名称',
            label: 'post_name',
          }, {
            type: 'varchar',
            comment: '显示顺序',
            label: 'post_sort',
         }
          ]
        }, {
        label: 'sys_menu',
          comment: '菜单信息表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '菜单ID',
            label: 'menu_id',
          }, {
            type: 'varchar',
            comment: '菜单名称',
            label: 'menu_name',
          }, {
            type: 'varchar',
            comment: '父菜单ID',
            label: 'parent_id',
          }, {
            type: 'varchar',
            comment: '显示顺序',
            label: 'order_num',
         }
          ]
        }, {
        label: 'sys_oper_log',
          comment: '操作日志记录',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '日志主键',
            label: 'info_id',
          }, {
            type: 'varchar',
            comment: '模块标题',
            label: 'title',
          }, {
            type: 'varchar',
            comment: '操作类型',
            label: 'business_type',
          }, {
            type: 'varchar',
            comment: '请求方式',
            label: 'request_method',
          }
          ]
        }, {
        label: 'sys_logininfor',
          comment: '系统访问记录',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '访问ID',
            label: 'info_id',
          }, {
            type: 'varchar',
            comment: '用户名称',
            label: 'user_name',
          }, {
            type: 'varchar',
            comment: '登录地址',
            label: 'ipaddr',
          }, {
            type: 'varchar',
            comment: '登录地点',
            label: 'login_location',
          }, {
            type: 'varchar',
          }]
        }, {
        label: 'sys_job',
          comment: '定时任务调度表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '任务名称',
            label: 'job_name',
          }, {
            type: 'varchar',
            comment: '任务组名',
            label: 'job_group',
          }, {
            type: 'varchar',
            comment: '调用目标字符串',
            label: 'invoke_target',
          }, {
            type: 'varchar',
            comment: '日志信息',
            label: 'job_message',
          }]
        }, {
        label: 'sys_job_log',
          comment: '定时任务调度日志表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '任务名称',
            label: 'job_name',
          }, {
            type: 'varchar',
            comment: '任务组名',
            label: 'job_group',
          }, {
            type: 'varchar',
            comment: '调用目标字符串',
            label: 'invoke_target',
          }, {
            type: 'varchar',
            comment: '日志信息',
            label: 'job_message',
          }]
        },{
        label: 'sys_notice',
          comment: '通知公告表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '公告标题',
            label: 'notice_title',
          }, {
            type: 'varchar',
            comment: '公告类型（1通知 2公告）',
            label: 'notice_type',
          }, {
            type: 'varchar',
            comment: '公告内容',
            label: 'notice_content',
          }, {
            type: 'varchar',
            comment: '状态（0正常 1关闭）',
          }
          ]
        },{
        label: 'sys_dict_type',
          comment: '字典类型表',
          info: '6 row',
          children: [{
            type: 'varchar',
            comment: '字典名称',
            label: 'dict_name',
          }, {
            type: 'varchar',
            comment: '字典类型',
            label: 'dict_type',
          }, {
            type: 'varchar',
            comment: '状态（0正常 1停用）',
            label: 'status',
          }, {
            type: 'varchar',
            comment: '备注',
            label: 'remark',
          }
          ]
        }
        ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentNode: null, // 当前右键点击的节点
      currentDatabase: ''
    }
  },
  computed: {
    ...mapGetters(['tagsList'])
  },
  mounted() {
    document.addEventListener('click', () => {
      this.$refs.contextMenu.style.display = 'none';
    });
  },
  methods: {
    handleContextMenu(event, data, node) {
      // 判断是否是一级节点
      if (!node.level || node.level !== 1) {
        return; // 仅支持一级节点
      }

      event.preventDefault();

      this.currentNode = data; // 保存当前节点数据
      // 显示右键菜单并设置位置
      const contextMenu = this.$refs.contextMenu;
      contextMenu.style.top = `${event.clientY}px`;
      contextMenu.style.left = `${event.clientX}px`;
      contextMenu.style.display = 'block';
    },
    handleNodeClick(data, node) {
      if(node.level === 1) {
        this.$store.commit('ADD_TAGSLIST', {
          name: 'newTable',
          path: '/newTable',
          meta: {
            title: `${data.label}-编辑表`
          }
        })
        this.$store.commit('SET_CURRENTACTIVE', '/newTable');
        this.$router.push('/index/newTable')
      } else if(node.level === 2) {
        this.$store.commit('ADD_TAGSLIST', {
          name: 'editTable',
          path: '/editTable',
          meta: {
            title: `${data.label}-表数据`
          }
        })
        this.$store.commit('SET_CURRENTACTIVE', '/editTable');
        this.$router.push('/index/editTable')
      }
    },
    newLinkHandle(){
      this.$store.commit('ADD_TAGSLIST', {
        name: 'newLink',
        path: '/newLink',
        meta: {
          title: '新建连接'
        }
      })
      this.$store.commit('SET_CURRENTACTIVE', '/newLink');
      this.$router.push('/index/newLink')
    },
  }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: hsla(220, 4%, 58%, .3);
}
.appContainer{
  height: 100%;
}
.headerBox{
  height: 30px;
  position: relative;
  background: #f1f1f1;
  text-align: center;
  line-height: 30px;
  ::v-deep .el-button{
    position: absolute;
    left: 10px;
    top: 0;
    padding: 0;
    height: 30px;
    border: none;
  }
  h1{
    font-size: 16px;
    color: #333;
    margin: 0;
  }
  i{
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
}
.containerMain{
  height: calc(100% - 50px);
  overflow: hidden;
  position: relative;
}
/* router-view 的过渡效果 Start */
/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/*router-view 的过渡效果 End*/
/*右键菜单 Start*/
.context-menu {
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.context-menu li {
  padding: 10px 15px 10px 10px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  i{
    margin-right: 10px;
  }
}

.context-menu li:hover {
  background-color: #0078d7;
  color: #fff;
  cursor: pointer;
}
/*右键菜单 End*/
::v-deep .el-tree{
  .el-tree-node.is-current{
    background-color: #f1f1f1;
  }
}
</style>
